<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <style>
        body { margin: 0; padding: 0; background: #f5f6fa; display: flex; min-height: 100vh; }
        .main-wrapper { display: flex; width: 100%; }
        .sidebar {
            width: 240px;
            background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            padding: 0;
            box-shadow: 2px 0 8px rgba(0,0,0,0.07);
            min-height: 100vh;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        .sidebar h3 {
            color: #fff;
            font-weight: bold;
            text-align: center;
            padding: 32px 0 16px 0;
            letter-spacing: 2px;
            font-size: 1.3rem;
            margin-bottom: 0;
        }
        .sidebar ul {
            list-style: none;
            padding: 0 0 32px 0;
            margin: 0;
            flex: 1;
        }
        .sidebar ul li {
            margin: 0;
        }
        .sidebar ul li a {
            display: flex;
            align-items: center;
            padding: 14px 32px;
            color: #e3e6f0;
            text-decoration: none;
            font-size: 1.08rem;
            border-left: 4px solid transparent;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
            border-radius: 0 24px 24px 0;
            margin-bottom: 2px;
        }
        .sidebar ul li a:hover,
        .sidebar ul li a.active {
            background: rgba(255,255,255,0.12);
            color: #fff;
            border-left: 4px solid #f6c23e;
            font-weight: bold;
        }
        .sidebar ul li a .icon {
            margin-right: 10px;
            font-size: 1.2em;
        }
        .main-content { flex-grow: 1; padding: 20px; background-color: #f5f6fa; }
        .info-card { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .avatar-upload-area {
            width: 100px;
            height: 100px;
            border: 2px dashed #ccc;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 2rem;
            color: #ccc;
            margin-bottom: 10px;
        }
        .avatar-preview img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 8px;
        }
    </style>
</head>
<body>
<div class="main-wrapper">
    <div class="sidebar">
        <h3>医院病例管理系统</h3>
        <ul>
            <li><a href="/personalInfo" class="active">个人信息</a></li>
            <li><a href="/myMedicalRecords">我的病历</a></li>
            <li><a href="/registerAppointment">在线挂号</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div id="personalInfoSection" class="info-card">
            <h2>个人信息</h2>
            <form id="personalInfoForm">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="avatar">头像</label>
                        <div>
                            <div id="avatarPreview" class="avatar-preview" style="display: none;">
                                <img src="" alt="Avatar">
                            </div>
                            <div id="avatarUpload" class="avatar-upload-area">
                                +
                            </div>
                            <small class="form-text text-muted">点击上传头像</small>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <input type="hidden" id="avatarPath">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="username">账号</label>
                        <input type="text" class="form-control" id="username" readonly>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="nickname">昵称</label>
                        <input type="text" class="form-control" id="nickname" >
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="gender">性别</label>
                        <select class="form-control" id="gender">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age" >
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="phone">手机号码</label>
                        <input type="text" class="form-control" id="phone" >
                    </div>
                    <div class="form-group col-md-6">
                        <label for="email">邮箱</label>
                        <input type="text" class="form-control" id="email" >
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="history">既往史</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="history" readonly>
                            <button type="button" class="btn btn-outline-primary apply-update-btn" data-field="history">申请修改</button>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="allergy">过敏史</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="allergy" readonly>
                            <button type="button" class="btn btn-outline-primary apply-update-btn" data-field="allergy">申请修改</button>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-secondary" id="modifyInfoButton" style="margin-top: 15px;">修改</button>
            </form>
        </div>
    </div>
</div>
<script>
$(function(){
    // 获取当前用户信息
    function loadUserInfo() {
        $.ajax({
            url: '/user/current',
            type: 'GET',
            success: function(res) {
                if(res.code === 0 && res.data) {
                    $('#username').val(res.data.username);
                    $('#nickname').val(res.data.nickname);
                    $('#gender').val(res.data.gender);
                    $('#age').val(res.data.age || '');
                    $('#phone').val(res.data.phone || '');
                    $('#email').val(res.data.email || '');
                    $('#history').val(res.data.history || '');
                    $('#allergy').val(res.data.allergy || '');
                    $('#avatarPath').val(res.data.avatar || '');
                    if(res.data.avatar) {
                        $('#avatarPreview img').attr('src', res.data.avatar);
                        $('#avatarPreview').show();
                        $('#avatarUpload').hide();
                        $('#avatarUpload').next('small').hide();
                    } else {
                        $('#avatarPreview').hide();
                        $('#avatarUpload').show();
                        $('#avatarUpload').next('small').show();
                    }
                } else {
                    alert('获取用户信息失败');
                }
            },
            error: function() {
                alert('获取用户信息失败');
            }
        });
    }
    loadUserInfo();
    // 添加隐藏的文件输入框
    $('.form-group.col-md-6').has('label[for="avatar"]').append('<input type="file" id="avatarFileInput" accept="image/*" style="display: none;">');
    // 处理头像上传
    $('#avatarFileInput').on('change', function(e) {
        var file = e.target.files[0];
        if (file) {
            var formData = new FormData();
            formData.append('file', file);
            $.ajax({
                url: '/user/upload/avatar',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    if(res.code === 0) {
                        $('#avatarPreview img').attr('src', res.data);
                        $('#avatarPreview').show();
                        $('#avatarPath').val(res.data);
                        $('#avatarUpload').hide();
                        $('#avatarUpload').next('small').hide();
                    } else {
                        alert(res.message || '头像上传失败');
                    }
                },
                error: function() {
                    alert('头像上传失败，请稍后重试');
                }
            });
        }
    });
    // 触发文件选择
    $('#avatarUpload, #avatarPreview').click(function() {
         $('#avatarFileInput').click();
    });
    // 处理修改按钮点击
    $('#modifyInfoButton').click(function() {
        var userData = {
            nickname: $('#nickname').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            age: $('#age').val(),
            gender: $('#gender').val(),
            username: $('#username').val(),
            avatar: $('#avatarPath').val()
        };
        $.ajax({
            url: '/user/update',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(userData),
            success: function(res) {
                if(res.code === 0) {
                    alert('个人信息更新成功');
                    loadUserInfo();
                } else {
                    alert(res.message || '更新失败');
                }
            },
            error: function() {
                alert('更新失败，请稍后重试');
            }
        });
    });
    // 申请修改弹窗
    let $updateModal = $(
        '<div class="modal fade" id="applyUpdateModal" tabindex="-1" aria-labelledby="applyUpdateModalLabel" aria-hidden="true">' +
        '  <div class="modal-dialog">' +
        '    <div class="modal-content">' +
        '      <div class="modal-header">' +
        '        <h5 class="modal-title" id="applyUpdateModalLabel">申请修改</h5>' +
        '        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>' +
        '      </div>' +
        '      <div class="modal-body">' +
        '        <form id="applyUpdateForm">' +
        '          <div class="mb-3">' +
        '            <label id="updateFieldLabel" class="form-label"></label>' +
        '            <input type="text" class="form-control" id="newValueInput" required>' +
        '          </div>' +
        '        </form>' +
        '      </div>' +
        '      <div class="modal-footer">' +
        '        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>' +
        '        <button type="button" class="btn btn-primary" id="submitUpdateBtn">提交申请</button>' +
        '      </div>' +
        '    </div>' +
        '  </div>' +
        '</div>'
    );
    if ($('#applyUpdateModal').length === 0) {
        $('body').append($updateModal);
    }
    let updateField = '';
    // 申请修改按钮点击
    $(document).on('click', '.apply-update-btn', function() {
        updateField = $(this).data('field');
        let label = updateField === 'history' ? '既往史' : '过敏史';
        $('#updateFieldLabel').text('请输入新的' + label);
        $('#newValueInput').val('');
        const modal = new bootstrap.Modal(document.getElementById('applyUpdateModal'));
        modal.show();
    });
    // 提交申请
    $(document).on('click', '#submitUpdateBtn', function() {
        const newValue = $('#newValueInput').val().trim();
        if (!newValue) {
            alert('请输入新内容');
            return;
        }
        $.ajax({
            url: '/user/updateRequest/apply',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ field: updateField, newValue: newValue }),
            success: function(res) {
                if (res.code === 0) {
                    alert('申请已提交，等待管理员审核');
                    bootstrap.Modal.getInstance(document.getElementById('applyUpdateModal')).hide();
                } else {
                    alert(res.message || '申请失败');
                }
            },
            error: function() {
                alert('申请失败，请稍后重试');
            }
        });
    });
});
</script>
</body>
</html> 